<template>
  <div class="home">
    <mi-header title="小米手机">
      <!-- 具名插槽 -->
      <div slot="content"
           class="content"
           @click="goToCartLis">购物车<span>( {{totalNum}} )</span>
      </div>
    </mi-header>
    <div class="container"
         ref="container">
      <div class="wrapper">
        <shop-card v-for="(item,index) in phoneData"
                   :key="index"
                   :item="item">
        </shop-card>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import MiHeader from '../components/home/miheader'
import ShopCard from '../components/home/shopCard'
import { mapState, mapGetters } from 'vuex'
export default {
  components: {
    MiHeader,
    ShopCard
  },
  data () {
    return {
      scroll: ''
    }
  },
  computed: {
    ...mapState(['phoneData', 'cartList']),
    ...mapGetters(['totalNum'])
  },
  methods: {
    goToCartLis () {
      this.$router.push('/cart')
    },
    _initScroll () {
      const container = this.$refs.container
      this.scroll = new BScroll(container)
    }
  },
  mounted () {
    this.$store.dispatch('setData')
    this.$nextTick(() => {
      this._initScroll()
    })
  },
  updated () {
    localStorage.setItem('cartList', JSON.stringify(this.cartList))
  }
}
</script>
<style lang="less" scoped>
.container {
  position: absolute;
  top: 50px;
  overflow: hidden;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0;
}
.wrapper {
  padding-bottom: 100px;
}
html {
  background-color: #fff !important;
}
.content {
  position: absolute;
  right: 10px;
  top: 0;
  font-size: 14px;
  color: aliceblue;
}
</style>
